<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.css" >
</head>

<body class="gray-bg">
    <div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">学生姓名:</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left" id="searchForm">
                    <div class="form-group">
                        <input type="text" class="form-control" id="searStr" name="searStr" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                    <button type="button" class="btn btn-default" onclick="(function(){$('#stuDetailModal').modal('show')})()">新增</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

        <div class="container">
            <div class="row">
                <table id="table"></table>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="stuDetailModal">
            <div class="modal-dialog" role="document" style="width: 70%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">学生信息</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="stuIndex" id="stuIndex">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">学号</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="stuId" name="stuId" value="" disabled="disabled" readonly="readonly"/>
                                </div>

                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="stuName" name="stuName" value="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="stuGender" name="stuGender" value="" />
                                </div>
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="stuAge" name="stuAge" value="" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="stuPhone" name="stuPhone" value="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-primary" onclick="saveStudentInfo()">保存</button>
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script src="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
    <script src="http://cdn.staticfile.org/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">
        function queryParams(params) {
            return {type: "owner", direction: "desc", limit: params.limit, offset: params.offset}
        }
        $(function(){
            searchMusicList();
        })
        function showStudentInfoDetailModal(rid) {
            $('#stuDetailModal').modal('show');
            $.get("/students3/getStudentByStuId",{stuId:rid}, function (res) {
                res = JSON.parse(res);
                if (res.result == 'success'){
                    if (res != null) {
                        $("#stuId").val(res.StudentInfo.stu_id);
                        $("#stuName").val(res.StudentInfo.stu_name);
                        $("#stuGender").val(res.StudentInfo.stu_gender);
                        $("#stuPhone").val(res.StudentInfo.stu_phone);
                        $("#stuAge").val(res.StudentInfo.stu_age);
                    }else {
                        alert('没有找到学生信息');
                    }
                }else if (res.result == 'fail'){
                    alert('获取学生信息失败!');
                }else{
                    alert(res.result);
                }
            })
        }

        function searchMusicList() {
            $('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
                url: "/system/stu/list",
                height:500,
                dataType: "json",
                pagination: true,
                pageSize: 30,
                queryParams:queryParams,
                sortable:true,
                sidePagination: "server",
                pageList: [30, 50],
                columns: [{
                    title: '序号',
                    width: "5%",
                    field: 'rowNo',
                }, {
                    field: 'stuId',
                    title: '学号',
                    width: "10%",
                    sortable:true
                }, {
                    field: 'stuName',
                    title: '姓名',
                    width: "10%",
                    sortable:true
                }, {
                    field: 'stuAge',
                    title: '年龄',
                    width: "10%",
                    sortable:true
                }, {
                    field: 'stuAender',
                    sortable:true,
                    title: '性别',
                    width: "10%", formatter: function (value, row, index) {
                        if (value == 'M') return '男';
                        else if (value == 'F') return '女';
                        else return value;
                    }
                }, {
                    field: 'stuPhone',
                    title: '联系方式',
                    width: "10%",
                }, {
                    title: '操作',
                    class: 'text-center',
                    width: '20%',
                    formatter: function (value, row, index) {
                        let res = "<button class='btn btn-sm btn-info' οnclick='showStudentInfoDetailModal(" + row.stu_id + ")' >详情</button>&nbsp;";
                        res += "<button class='btn btn-sm btn-primary' οnclick='modifyStudentInfoDetailModal(" +index + ")'>修改</button>&nbsp;";
                        res += "<button class='btn btn-sm btn-danger' οnclick='removeStudentBuId(" +index + ")'>删除</button>";
                        return res;
                    }
                },],onPostBody: function (value) {
                    // 解决模态框加载table数据的时候，底部数据超出表格的问题
                    $(".fixed-table-container").css('padding-bottom', '37px');
                }
            });
            return false;
        }

        $("#searchForm").submit(function (e) {
            let option = $('#table').bootstrapTable('getOptions');
            option.queryParams = function(params){
                let searStr = document.getElementById('searStr').value;
                params.stuname = searStr;
                return params;
            }
            $('#table').bootstrapTable('refresh',option);
            return false;
        })

        function modifyStudentInfoDetailModal(i){
            const stuInfo = $('#table').bootstrapTable('getData')[i];
            $("#stuId").val(stuInfo.stu_id);
            $("#stuName").val(stuInfo.stu_name);
            $("#stuGender").val(stuInfo.stu_gender);
            $("#stuPhone").val(stuInfo.stu_phone);
            $("#stuAge").val(stuInfo.stu_age);
            $("#stuIndex").val(i);
            $('#stuDetailModal').modal('show');
        }
        function  saveStudentInfo(){
            const stuId = $("#stuId").val();
            const stuName = $("#stuName").val();
            const stuGender = $("#stuGender").val();
            const stuPhone = $("#stuPhone").val();
            const stuAge = $("#stuAge").val();
            const stuIndex = $("#stuIndex").val();
            const student = {stu_id: stuId, stu_name: stuName, stu_gender: stuGender, stu_phone: stuPhone, stu_age: stuAge};
            $.post("/students3/saveStudentInfo" ,student, function (res) {
                res = JSON.parse(res);
                if (res.result == 'success' ){
                    if (res.flag == true){
                        $('#stuDetailModal').modal('hide');
                        alert("更新成功！");
                        if(stuId == '' || stuId == null){
                            student.stu_id = res.stuId;
                            $('#table').bootstrapTable('prepend', student);
                        } else {
                            $("#table").bootstrapTable("updateRow", {
                                index:stuIndex,//更新行索引，0起始
                                replace:false,//合并or替换行数据，true替换，false合并，默认false
                                row:student
                            });
                        }
                    }else{
                        alert('学生信息更新失败，请检查！');
                        $('#stuDetailModal').modal('hide');
                    }
                }else if (res.result == 'fail' ){
                    alert('学生信息更新失败');
                }else{
                    alert(res.result);
                }
            })
        }
        function removeStudentBuId(i){
            const stuInfo = $('#table').bootstrapTable('getData')[i];
            let flag = confirm(`确定要删除姓名为： ${stuInfo.stu_name} 学号为： ${stuInfo.stu_id} 的学生吗？`);
            if (!flag) return false;
            $.post("/students3/removeStudentBuId" , stuInfo, function (res) {
                res = JSON.parse(res);
                if (res.result == 'success' ){
                    if (res.flag == true){
                        $("#table").bootstrapTable('remove', {field:'stu_id',values:[stuInfo.stu_id]});
                        alert("删除成功！");
                    }else{
                        alert('学生信息删除失败，请检查！');
                        $('#stuDetailModal').modal('hide');
                    }
                }else if (res.result == 'fail' ){
                    alert('学生信息删除失败');
                }else{
                    alert(res.result);
                }
            })
        }
        $('#stuDetailModal').on('hidden.bs.modal', function () {//学生信息模态框关闭，清空缓存
            $("#stuId").val('');
            $("#stuName").val('');
            $("#stuGender").val('');
            $("#stuPhone").val('');
            $("#stuAge").val('');
            $("#stuIndex").val('');
        })
    </script>
</body>
</html>
